import { Section } from "@/components";
import styles from "./index.module.scss";
/**
 * 动画吸引力实例
 */
const AppealTwo = () => {
  const handleClick = () => {
    const dl = document.getElementById("dl");
    console.log("handleClick", dl);
    dl?.classList.add("run");
    setTimeout(() => dl?.classList.add("done"), 4000);
  };

  return (
    <Section dataAutoAnimate className={styles.wrapper}>
      <div id="desc" className={styles.desc}>
        <h4>5.吸引力</h4>
        <p>
          吸引力是艺术作品的特质，而如何实现有吸引力的作品则需要不断的尝试。
        </p>
      </div>
      <div className={styles.appeal}>
        <div
          id="dl"
          title="下载"
          onClick={handleClick}
          className={`${styles.dl} ${styles.run} `}
        >
          <div className={styles.dlBox}>
            <div className={styles.dlButton}>
              <div className={styles.arrow}></div>
              <div className={styles.basket}>
                <div className={styles.basketTop}></div>
              </div>
            </div>
            <div className={styles.dlProgress}>
              <div className={styles.check}>
                <svg>
                  <use xlinkHref="#check" />
                </svg>
              </div>
            </div>
          </div>
          <div className={styles.dlStatus}>
            <div className={`${styles.text} ${styles.textFile}`}>Status</div>
            <div className={`${styles.text} ${styles.textNumber}`}></div>
          </div>
        </div>
      </div>
    </Section>
  );
};

export default AppealTwo;
